import './App.css';
import { Layout } from 'antd';
import Nav from './components/nav';
import ContenTab from './components/contenTab'; 
import { useState } from 'react';

const { Header, Content, Footer } = Layout;

function App() {
  const cacheKey = localStorage.getItem('changTab') || '1';
  const [ tabKey, setTabKey ] = useState(cacheKey);

  const changTab = (key) => {
    setTabKey(key);
    localStorage.setItem('changTab', key);
  };

  return (
    <Layout className="layout">
      
      <Header>
        <Nav changTab={changTab} defaultSelectedKeys={cacheKey} />
      </Header>
      
      <Content>
        <ContenTab tabKey={tabKey} />
      </Content>

      <Footer style={{ textAlign: 'center' }}>Created By TeamHipo</Footer>

    </Layout>
  );
}

export default App;
